<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/goods-details.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/css_pc_init.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="header-nav">
                <h1 class="header-logo">
                    <a href="index.html">
                        <img src="../images/logo.png" alt="21cake logo" />
                    </a>
                </h1>
                <ul class="nav-box">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="cake.html" target="_self">蛋糕</a></li>
                    <li><a href="bread.html" target="_self">面包</a></li>
                    <li><a href="ice-cream.html" target="_self">冰淇淋</a></li>
                    <li><a href="coffee-tea.html" target="_self">咖啡下午茶</a></li>
                    <li><a target="_self">咖啡全国送</a></li>
                    <li><a target="_self">企业专区</a></li>
                </ul>
                <div class="right-city-user">
                    <a class="header-app app-download">APP下载</a>
                    <div class="current-city">上海<i></i></div>
                    <a class="header-message" href="">消息</a>
                    <span class="not-login"><a href="login.html">登录</a>/<a href="register.html">注册</a></span>
                    <a href="" class="header-user">
                        <img src="../images/user-img.png" alt="21cake user icon" />
                    </a>
                    <a href="cart.html" class="header-cart">
                        <i></i>
                    </a>
                    <ul class="current-city-list  header-select">
                        <li><a href="javascript:void(0);" class="city-id-1">上海</a></li>
                        <li><a href="javascript:void(0);" class="city-id-2">北京</a></li>
                        <li><a href="javascript:void(0);" class="city-id-3">天津</a></li>
                        <li><a href="javascript:void(0);" class="city-id-4">杭州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-5">无锡</a></li>
                        <li><a href="javascript:void(0);" class="city-id-6">苏州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-7">广州</a></li>
                        <li><a href="javascript:void(0);" class="city-id-8">深圳</a></li>
                    </ul>
                    <ul class="header-user-list  header-select">
                        <li><a href="" target="_blank">我的订单</a></li>
                        <li><a href="" target="_blank">我的优惠券</a></li>
                        <li><a href="" target="_blank">我的纪念日</a></li>
                        <li><a class="logout" href="" target="_self">退出登录</a></li>
                    </ul>
                    <ul class="message-list-header  header-select">
                        <li><a href="" target="_blank">通知</a></li>
                        <li><a href="" target="_blank">物流</a></li>
                    </ul>
                    <dl class="app-list  header-select">
                        <dt>
                            <img src="../images/footer-erweima.png" alt="下载APP" />
                        </dt>
                        <dd>下载享更多优惠</dd>
                    </dl>
                </div>
            </div>
        </div>
    </header>

    <div class="details-banner">
    </div>

    <div class="content-box">
    </div>

    <footer>
        <div class="footer">
            <img class="footer-logo" src="../images/footer-logo.png" height="36" width="96" alt="">
            <div class="footer-nav">
                <a href="">联系我们</a>
                <span>|</span>
                <a href="">订购帮助</a>
                <span>|</span>
                <a href="">企业合作</a>
                <span>|</span>
                <a href="">生产经营资质</a>
                <span>|</span>
                <a href="">公告专区</a>
            </div>
            <div class="footer-icon">
                <a href="http://weibo.com/21cake" target="_blank">
                    <img src="../images/footericon-01.png">
                </a>
                <a class="footer-weixin">
                    <div class="footer-erweima footer-weixin-erweima">
                        <img src="../images/erweima.png">
                    </div>
                    <img src="../images/footericon-02.png">
                </a>
                <a class="footer-app">
                    <div class="footer-erweima footer-app-erweima">
                        <img src="../images/footer-erweima.png">
                    </div>
                    APP
                </a>
            </div>

            <div class="footer-text">
                <span>订购专线：400 650 2121（服务时间 08:00–22:00）</span>
                <span>客服电话：021-23099721（全国） | kefu@21cake.com（邮箱）</span>
                <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
                <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
        </div>
    </footer>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/header.js"></script>
<script src="../js/login.js"></script>
<script src="../js/cookie.js"></script>
<script>
    //头部的显隐事件
    header();
    //登录事件
    login();

    //商品详情
    var search = location.search.substring(1);
    if (search.indexOf("goods_id") > -1) {
        var searchList = search.split("&");
        var goods_id = searchList.filter(function (item) {
            return item.indexOf("goods_id") > -1;
        })[0].split("=")[1];
        let banner_html = "";
        let content_html = "";
        $.ajax({
            type: "get",
            url: "../php/goods_details_byid.php",
            data: {
                goods_id: goods_id
            },
            dataType: "json",
            success: function (obj) {
                let goods_id = obj["goods_id"];
                let goods_name = obj["goods_name"];
                let goods_sket = obj["goods_sket"];
                let goods_price = obj["goods_price"];
                let goods_sweet = obj["goods_sweet"];
                let goods_smallimg = obj["goods_smallimg"];
                let goods_img1 = obj["goods_img1"];
                let goods_img2 = obj["goods_img2"];
                let goods_img3 = obj["goods_img3"];
                let goods_details = obj["goods_details"];
                let measure_id = obj["measure_id"];
                let measure = obj["measure"];
                let size = obj["size"];
                let num = obj["num"];
                let mount = obj["mount"];
                let img = obj["img"];
                let time = obj["time"];

                banner_html += `
        <div class="left-img-box">
            <div class="video-box">
                <img src="../images/${goods_img1}" draggable="false">
                <div class="shadow"></div>
                <div class="imgBigContent">
                    <img src="../images/${goods_img1}" draggable="false" class="imgBig">
                </div>
            </div>
        </div>
        <div class="right-list">
            <a href="" class="top-banner"></a>
            <ul>
                <li class="active">
                    <img src="../images/${goods_img1}" alt="${goods_name}">
                </li>
            </ul>
        </div>
                `;

                content_html += `
        <div class="pro-details-cont">
            <div class="details-content-left">
                <h1 class="pro-details-title">${goods_name}</h1>
                <div class="sub-title">
                    <p></p>
                </div>
                <div class="pro-details-label">
                    <a target="_blank">情侣 &gt;</a>
                    <a target="_blank">人气 &gt;</a>
                    <a target="_blank">白色情人节 &gt;</a>
                    <a target="_blank">结婚 &gt;</a>
                    <a target="_blank">生日 &gt;</a>
                    <a target="_blank">相识 &gt;</a>
                    <a target="_blank">总有一款适合你 &gt;</a>
                </div>
                <div class="pro-details-explain">
                    ${goods_details}
                </div>
                <ul class="details-distribution">
                    <li class="distribution-exist"><i></i><span>保鲜条件：</span>0-4℃保藏10小时，5℃食用为佳</li>
                    <li class="distribution-sweet">
                        <i></i>
                        <span>参考甜度：</span>
                        <span class="sweet-icon">
                        </span>
                    </li>
                </ul>
            </div>
            <!-- 价格显示 -->
            <div class="details-content-right">
                <p class="details-price">¥<span>${goods_price}</span>/${measure}</p>
                <div class="details-Specifications">
                    <div class="outer-box">
                        <div class="details-img-box">
                            <ul class="details-options fl-left">
                                <li class="details-options-size"><i></i>${size}</li>
                                <li class="details-options-unmber"><i></i>${num}</li>
                                <li class="details-options-laid"><i></i>${mount}</li>
                                <li class="details-options-time"><i></i>${time}</li>
                            </ul>
                        </div>
                        <!-- 选择蛋糕尺寸 -->
                        <dl class="details-Specifications-size">
                            <dt>商品规格</dt>
                            <dd>
                                <ul>
                                    <li><a class="active">${measure}<i></i></a></li>
                                </ul>
                            </dd>
                        </dl>
                    </div>
                    <!-- 购物按钮 -->
                    <div class="details-button">
                        <button href="javascript:void(0);" class="details-but-buy" onclick="addShoppingCart(this,'${goods_id}','${measure_id}')">立即购买</button>
                        <button href="javascript:void(0);" class="details-but-cart detailsAddCart" onclick="addShoppingCart(this,'${goods_id}','${measure_id}')">
                            加入购物车
                        </button>
                        <button href="javascript:void(0);" class="details-empty"><i></i>到货通知
                        </button>
                    </div>
                    <div class="addcart-dialog in-cart">
                        <!-- 加入成功后 -->
                        <div>
                            <p><i></i>成功添加购物车</p>
                            <a href="cart.html" class="details-go-cart">查看购物车</a>
                        </div>
                        <i></i>
                    </div>
                </div>
            </div>
        </div>
                `;

                $(".details-banner").html(banner_html);
                if (goods_img2 !== null) {
                    $(".right-list li").last().after(`
                <li>
                    <img src="../images/${goods_img2}" alt="${goods_name}">
                </li>`
                    );
                }
                if (goods_img3 !== null) {
                    $(".right-list li").last().after(`
                <li>
                    <img src="../images/${goods_img3}" alt="${goods_name}">
                </li>`
                    );
                }
                $(".content-box").html(content_html);
                switch (goods_sweet) {
                    case "0":
                        $(".sweet-icon").html(`<i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>`);
                        break;
                    case "1":
                        $(".sweet-icon").html(`<i class="active"></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>`);
                        break;
                    case "2":
                        $(".sweet-icon").html(`<i class="active"></i>
                            <i class="active"></i>
                            <i></i>
                            <i></i>
                            <i></i>`);
                        break;
                    case "3":
                        $(".sweet-icon").html(`<i class="active"></i>
                            <i class="active"></i>
                            <i class="active"></i>
                            <i></i>
                            <i></i>`);
                        break;
                    case "4":
                        $(".sweet-icon").html(`<i class="active"></i>
                            <i class="active"></i>
                            <i class="active"></i>
                            <i class="active"></i>
                            <i></i>`);
                        break;
                    case "5":
                        $(".sweet-icon").html(`<i class="active"></i>
                            <i class="active"></i>
                            <i class="active"></i>
                            <i class="active"></i>
                            <i class="active"></i>`);
                        break;
                }

                if (img !== null) {
                    $(".details-img-box").prepend(`<img src="../images/${img}" class="details-img">`);
                }

                //details-banner的hover事件
                $(".right-list li").hover(function () {
                    $(".right-list li").removeClass("active");
                    $(this).addClass("active");
                    $(".video-box img").attr("src", $(this).find("img").attr("src"));
                }, function () { });

                //移动效果
                $(".video-box").mousemove(function (e) {
                    $(".shadow").css("display", "block");
                    $(".imgBigContent").css("display", "block");
                    e = window.event || e;
                    //阴影块的x y
                    var x = e.pageX - $(".shadow").width() / 2 - $(".left-img-box").offset().left;
                    var y = e.pageY - $(".shadow").height() / 2 - $(".left-img-box").offset().top;
                    if (x <= 0) x = 0;
                    if (y <= 0) y = 0;
                    //阴影块的最大移动距离
                    var maxX = $(".video-box").width() - $(".shadow").width();
                    var maxY = $(".video-box").height() - $(".shadow").height();
                    if (x >= maxX) x = maxX;
                    if (y >= maxY) y = maxY;
                    //大图片的x y
                    var bigX = -$(".imgBig").width() * x / $(".video-box").width();
                    var bigY = -$(".imgBig").height() * y / $(".video-box").height();
                    //放大图片的块的x y
                    var bigConX = x - ($(".imgBigContent").width() / 2 - $(".shadow").width() / 2);
                    var bigConY = y - ($(".imgBigContent").height() / 2 - $(".shadow").height() / 2);
                    $(".shadow").css("left", x + "px");
                    $(".shadow").css("top", y + "px");
                    $(".imgBig").css("left", bigX + "px");
                    $(".imgBig").css("top", bigY + "px");
                    $(".imgBigContent").css("left", bigConX + "px");
                    $(".imgBigContent").css("top", bigConY + "px");
                });
                //移出隐藏
                $(".video-box").mouseout(function () {
                    $(".shadow").css("display", "none");
                    $(".imgBigContent").css("display", "none");
                });
            }
        });
    } else {
        location.replace("index.html");
    }

    //加入购物车
    function addShoppingCart(object, id,measure_id) {
        if (getCookie("t_cake_userId")) {
            let goodsnum = 1;
            $.ajax({
                type: "get",
                url: "../php/addcart.php",
                data: {
                    userid: getCookie("t_cake_userId"),
                    goodsid: goods_id,
                    measure_id: measure_id,
                    birthday_card: "选择生日牌",
                    goodsnum: goodsnum
                },
                dataType: "json",
                success: function (obj) {
                    $(".addcart-dialog").css("display", "block");
                    setTimeout(() => {
                        $(".addcart-dialog").css("display", "none");
                    }, 3000);
                    if($(object).html() === "立即购买"){
                        location.href = "cart.html";
                    }
                }
            });
        } else {
            setCookie("historyURL",location.href,7);
            location.href = "login.html";
        }
    }

</script>

</html>